<template>
  <div class="chat-box-1">
    <div class="title-box">
      <span class="title">{{ ChatList.info.title }}</span>
    </div>
    <div v-if="!load" id="chat" class="message-box">
      <div v-for="(chat,index) in computed(()=>store.state.message[ChatList.info.id]).value" :key="index">
        <div v-if="chat.id===2" class="word">
          <el-avatar :src="chat.icon" style="margin-left: 15px"/>
          <div class="info">
            <p class="time">{{ chat.tick }}</p>
            <div class="info-content">
              {{ chat.content }}
            </div>
          </div>
        </div>
        <div v-else class="word-my">
          <div class="info1">
            <p class="time1">{{ chat.tick }}</p>
            <div class="info-content1">
              {{ chat.content }}
            </div>
          </div>
          <el-avatar :src="chat.icon" style="margin-right: 15px"/>
        </div>
      </div>
    </div>
    <div class="send-box">
      <div class="other_w">
        <el-space>
          <el-popover :width="300" placement="top-start">
            <template #reference>
          <span>
            <svg class="icon" height="32" p-id="7474" t="1679557211326" version="1.1"
                 viewBox="0 0 1024 1024" width="32" xmlns="http://www.w3.org/2000/svg"><path
                d="M813.738667 813.696a426.666667 426.666667 0 1 0-603.434667 0 426.666667 426.666667 0 0 0 603.434667 0z"
                fill="#FFD264" p-id="7475"></path><path
                d="M735.232 147.797333A426.666667 426.666667 0 0 1 152.448 741.418667 426.666667 426.666667 0 1 0 735.232 147.797333z"
                fill="#FFC656" p-id="7476"></path><path
                d="M143.36 557.013333A396.074667 396.074667 0 0 1 853.333333 315.733333 396.16 396.16 0 1 0 195.968 754.432a393.856 393.856 0 0 1-52.608-197.418667z"
                fill="#FFD781" p-id="7477"></path><path
                d="M337.066667 576.554667a14.08 14.08 0 0 0-22.869334 15.36 213.888 213.888 0 0 0 395.477334 3.925333 14.464 14.464 0 0 0 0.469333-9.386667 14.208 14.208 0 0 0-5.546667-7.594666 13.824 13.824 0 0 0-9.088-2.389334 14.165333 14.165333 0 0 0-8.533333 3.84c-62.421333 60.501333-194.986667 146.645333-349.909333-3.754666z"
                fill="#5E4939" p-id="7478"></path><path
                class="selected"
                d="M337.066667 576.554667a14.08 14.08 0 0 0-22.869334 15.36 213.888 213.888 0 0 0 395.477334 3.925333 14.464 14.464 0 0 0 0.469333-9.386667 14.208 14.208 0 0 0-5.546667-7.594666 13.824 13.824 0 0 0-9.088-2.389334 14.165333 14.165333 0 0 0-8.533333 3.84c-62.421333 60.501333-194.986667 146.645333-349.909333-3.754666z"
                data-spm-anchor-id="a313x.7781069.0.i1" fill="#62422A" p-id="7479"></path><path
                d="M386.261333 435.626667c0 29.312-14.037333 53.034667-31.402666 53.034666S323.413333 465.066667 323.413333 435.626667s14.08-52.992 31.445334-52.992 31.402667 23.722667 31.402666 52.992zM700.629333 435.626667c0 29.312-14.037333 53.034667-31.402666 53.034666s-31.445333-23.722667-31.445334-53.034666 14.037333-52.992 31.445334-52.992 31.402667 23.722667 31.402666 52.992z"
                fill="#352B2B" p-id="7480"></path>
            </svg>
          </span>
            </template>
            <div>
              <span v-for="(item,index) in emojis" :key="index" class="em" @click="select(item)">{{ item.text }}</span>
            </div>
          </el-popover>
        </el-space>
      </div>
      <div class="input-area">
        <el-input v-model="Message.content" :maxlength="200" :rows="6" resize="none" style="font-size: 17px"
                  type="textarea"
                  @keyup.enter.native="send"/>
      </div>
      <div style="float: right;margin-right: 20px">
        <el-button type="success" @click="send">发送</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>

import {computed, nextTick, onBeforeUnmount, onMounted, reactive, watch} from "vue";
import {sendWSPush} from "../server/websocket.js";
import store from "../store/index.js";

let emojis = [
  '😀', '😄', '😅', '🤣', '😂', '😉', '😊', '😍', '😘', '😜',
  '😝', '😏', '😒', '🙄', '😔', '😴', '😷', '🤮', '🥵', '😎',
  '😮', '😰', '😭', '😱', '😩', '😡', '💀', '👽', '🤓', '🥳',
  '😺', '😹', '😻', '🤚', '💩', '👍', '👎', '👏', '🙏', '💪'
]
emojis = emojis.map(emoji => ({text: emoji}))

const ChatList = defineProps({
  info: {
    type: Object,
    default: {
      current_id: 0,
      current_tick: '',
      id: 0,
      title: '',
      icon: '',
      show: true,
    }
  },
})

const NewList = reactive({
  List: []
})

GetMsgList()

function GetMsgList() {
  if (store.state.message[ChatList.info.id]) {
    NewList.List = store.state.message[ChatList.info.id]
  } else {
    NewList.List = []
  }
}

const Message = reactive({
  fromId: ChatList.info.current_id,
  fromName: ChatList.info.current_tick,
  targetId: ChatList.info.id,
  targetName: ChatList.info.title,
  type: 1,
  media: 1,
  content: '',
  icon: ChatList.info.icon
})

function send() {
  Message.content = Message.content.replace(/\n/g, "")
  sendWSPush(Message)
  Message.content = ''
}

// const getMessage = (res) => {
//   let data = res && res.detail.data
//   data = JSON.parse(data)
//   store.commit('TMessage', data)
//   const time = getLocalTime()
//   if (ChatList.info.current_id === data.from) {
//     store.commit('ChangeList', {
//       id: data.target,
//       content: data.content,
//       time: time
//     })
//     return
//   }
//   if (store.state.chat_id !== data.from) {
//     store.commit('ChangeListTotal', {
//       id: data.from,
//       content: data.content,
//       time: time
//     })
//     return
//   }
//   store.commit('ChangeList', {
//     id: data.from,
//     content: data.content,
//     time: time
//   })
// }
//
// function getLocalTime(){
//   let data = new Date()
//   let year = data.getFullYear()
//   let month = repair(data.getMonth()+1)
//   let day = repair(data.getDate())
//   let hour = repair(data.getHours())
//   let minute = repair(data.getMinutes())
//   return year + '-' + month + '-' + day + ' ' + hour + ':' + minute
// }
// function repair(i){
//   if(i>=0&&i<=9){
//     return '0'+i
//   }
//   return i
// }
//
// window.addEventListener('onmessageWS', getMessage)
// onBeforeUnmount(() => {
//   window.removeEventListener('onmessageWS', getMessage)
// })

function select(item) {
  Message.content = Message.content + item.text
}

watch(() => store.state.message, () => {
  nextTick(() => {
    let chat = document.getElementById('chat')
    chat.scrollTop = chat.scrollHeight
  })
}, {
  deep: true
})

watch(() => ChatList.info.title, () => {
  nextTick(() => {
    Message.targetId = ChatList.info.id
    if (store.state.message[Message.targetId]) {
      NewList.List = store.state.message[Message.targetId]
    } else {
      NewList.List = []
    }
  })
}, {
  deep: true
})

onMounted(() => {
  let chat = document.getElementById('chat')
  chat.scrollTop = chat.scrollHeight
})

</script>

<style scoped>
.chat-box-1 {
  width: 900px;
  height: 865px;
  background-color: #eeebeb;
}

.title {
  font-size: 25px;
  font-family: 楷体, serif, 微软雅黑;
}

.title-box {
  height: 40px;
  padding-top: 10px;
  text-align: center;
}

.send-box {
  border-top: 1px solid rgba(126, 124, 124, 0.73);
}

.message-box {
  overflow: auto;
  height: 550px;
}

.message-box::-webkit-scrollbar {
  width: 7px;
}

.message-box::-webkit-scrollbar-track {
  width: 6px;
  background: transparent;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.message-box:hover::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, .5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  transition: background-color .3s;
  cursor: pointer;
}

.message-box::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, .3);
}

.other_w {
  margin-top: 8px;
  margin-left: 20px;
}

.input-area {
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 9px;
}

/deep/ .el-textarea__inner {
  background-color: transparent;
  border: none;
  --el-input-focus-border-color: none;
  box-shadow: none;
}

.em {
  font-size: 25px;
  padding: 10px;
  cursor: pointer;
  user-select: none;
}

.word {
  display: flex;
  margin-bottom: 20px;
}

.info {
  margin-left: 10px;
}

.time {
  font-size: 12px;
  color: rgba(51, 51, 51, 0.8);
  height: 20px;
  line-height: 20px;
  margin: 0 0 0;
}

.info-content {
  padding: 10px;
  font-size: 14px;
  background: #fff;
  position: relative;
  margin-top: 8px;
  height: auto;
  word-wrap: break-word;
  word-break: break-all;
}

.info-content::before {
  position: absolute;
  left: -8px;
  top: 8px;
  content: '';
  border-right: 10px solid #FFF;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.word-my {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.info1 {
  width: 90%;
  margin-left: 10px;
  text-align: right;
}

.time1 {
  font-size: 12px;
  color: rgba(51, 51, 51, 0.8);
  height: 20px;
  line-height: 20px;
  margin: 0 10px 0 0;
}

.info-content1 {
  max-width: 40%;
  padding: 10px;
  font-size: 14px;
  float: right;
  margin-right: 10px;
  position: relative;
  margin-top: 8px;
  background: #A3C3F6;
  text-align: left;
  height: auto;
  word-wrap: break-word;
  word-break: break-all;
}

.info-content1:after {
  position: absolute;
  right: -8px;
  top: 8px;
  content: '';
  border-left: 10px solid #A3C3F6;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/deep/ .el-scrollbar__wrap {
  overflow: scroll;
  height: 100% !important;
  overflow-x: hidden !important;
}
</style>